<template>
  <div>
    <div>
      <el-button type="primary" @click="addTradeMake">添加</el-button>
    </div>
    <!-- 
      label：表头名称
      prop: 对应列内容的字段名
      width: 宽度
      border: 给表加上边框
      data: 绑定的数据
    -->
    <!-- 内容 -->
    <el-table :data="list" style="width: 100%" border>
      <el-table-column type="index" prop="prop" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="width"></el-table-column>
      <el-table-column prop="id" label="品牌LOGO" width="width">
        <!-- 利用作用域插槽 -->
        <template slot-scope="{row}">
          <!-- {{row}} {{$index}} -->
          <img :src="row.logoUrl" style="width:100px;height:100px; " />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{row}">
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="editTradeMake(row)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTradeMake(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <!-- 
      current-page： 当前页
      pager-count: 展示的页数
      page-size： 页面数量
      page-sizes="[10, 20, 50]： 一次展示的页面数量
      layout="prev, pager, next"
      total="1000": 总数量
      @current-change="handleCurrentChange": 当前页事件
      @size-change="handleSizeChange": 每页展示数量事件
    -->
    <el-pagination
      style="margin-top:10px;text-align:center;"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      :pager-count="7"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <!--对话框 -->
    <!-- 
    dialogFormVisible: 显示或者隐藏
    -->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <!-- 
        model: 绑定数据
        rules: 校验的字段
        prop:需要验证的名称
       -->
      <el-form :model="formData" :rules="rules" ref="ruleForm"> 
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input autocomplete="off" style="width:80%;" v-model="formData.tmName"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!-- 
            action: 图片链接地址
            on-success: 图片上传成功
            before-upload: 图片上传之前
           -->
          <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <!-- 就是一个 v-if 如果里面有图片则显示, 没有则显示 + 号 -->
            <img v-if="formData.logoUrl" :src="formData.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTradeMake">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "tradeMake",
  data() {
    // 自定义校验
     var tmName = (rule, value, callback) => {
      if(value.length >= 2 && value.length <= 10){
        callback()
      }else{
        callback(new Error('长度在 2 到 10 个字符'))
      }
    };
    return {
      currentPage: 1, // 当前页
      limit: 3, // 每页展示在页面的数量
      total: 100, // 一共多少页
      list: [], // 数据
      // 控制对话框显示与隐藏
      dialogFormVisible: false,
      // 表单数据
      formData:{
        logoUrl: '',
        tmName: ''
      },
      // 表单验证
      rules:{
        // 校验品牌名
        tmName: [
          // trigger: 触发类型
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          // 自定义校验
          { validator: tmName, trigger: 'change' }
        ],
        // 校验品牌LOGO
        logoUrl: [
          { required: true, message: '请上传图片',},
        ],
      }
    };
  },
  mounted() {
    this.getTradeMakeList();
  },
  methods: {
    // 获取商品信息列表
    async getTradeMakeList() {
      let { currentPage, limit } = this;
      // 获取商品信息数据
      let result = await this.$api.trademake.reqTradeMakeList(
        currentPage,
        limit
      );
      if (result.code == 20000 || result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },
    // 当前页发生变化的时候
    handleCurrentChange(page) {
      // 分页器中 里面有个默认参数 就是 currentPage(当前页)
      this.currentPage = page;
      // 再次发送请求
      this.getTradeMakeList();
    },
    // 每页展示数量事件
    handleSizeChange(limit) {
      this.limit = limit;
      this.getTradeMakeList();
    },
    // 添加商品
    addTradeMake() {
      this.dialogFormVisible = true;
      // 添加之前先把里面的内容清空
      this.formData.logoUrl = ''
      this.formData.tmName = ''
    },
    // 修改商品
    editTradeMake(row) {
      // 显示对话框
      this.dialogFormVisible = true;
      // 浅拷贝: 拷贝第一层
      this.formData = {...row}
    },
    // 删除商品
    deleteTradeMake(row){
      this.$confirm(`您确定删除${row.tmName}品牌吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        // 确认时
      }).then(async () => {
        let result = await this.$api.trademake.reqDeleteTradeMake(row.id)
        if(result.code === 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // 再次请求数据
          this.getTradeMakeList()
        }
        // 取消时
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 图片上传成功事件
    handleAvatarSuccess(res,info){
      // 将路径放进 from 里面
      this.formData.logoUrl = res.data
    },
    // 上传之前事件
    beforeAvatarUpload(){

    },

    // 添加以及修改事件
    async addOrUpdateTradeMake(){
      // validate: 验证事件 返回布尔值 
      this.$refs.ruleForm.validate(async success => {
        // 当所有校验都通过时
        if(success){
          // 对话框关闭
          this.dialogFormVisible = false
          let result = await this.$api.trademake.reqAddOrUpdateTradeMake(this.formData)
          if(result.code == 200){
            // 提示框
            this.$message({
              message:this.formData.id?'商品修改成功':'商品添加成功',
              type: 'success'
            })
            // 再次发送请求
            this.getTradeMakeList()
          }
        }else{
          alert('请正确的输入信息')
        }
      })
    },
  }
};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>